.table-of-contents {
    margin: 1em 0;
    padding: 1em;
    border: 1px solid #ddd;
    background-color: #ffffff; /* 背景色为白色，使内容更清晰 */
    border-radius: 8px; /* 增加圆角效果 */
    max-width: 300px; /* 适中的最大宽度 */
    position: fixed;
    top: 70px; /* 从顶部起始位置 */
    right: 20px; /* 从右侧起始位置 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    z-index: 1000; /* 确保 TOC 在其他内容之上 */
    overflow-y: auto; /* 允许垂直滚动，内容过多时可滚动 */
    max-height: calc(100vh - 120px); /* 限制最大高度，避免覆盖页面内容 */
}

.table-of-contents.dark-mode {
    background-color: #333;
    color: #fff;
    border-color: #555; /* 改变边框颜色以适应暗模式 */
}

.table-of-contents ul {
    list-style-type: none; /* 去除默认的列表样式 */
    padding-left: 0; /* 去除左侧内边距 */
    margin: 0; /* 去除外边距 */
}

.table-of-contents li {
    margin: 0.5em 0; /* 每个列表项的间距 */
}

.table-of-contents a {
    text-decoration: none; /* 去除链接下划线 */
    color: #249ded; /* 链接颜色 */
    font-weight: normal; /* 链接文字正常粗细 */
    transition: color 0.3s ease; /* 链接颜色平滑过渡效果 */
}

.table-of-contents.dark-mode a {
    color:  #249ded;
}

.table-of-contents a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
    color: #559ad1; /* 悬停时颜色稍暗 */
}

/* 为不同级别的标题设置不同的缩进 */
.toc-level-1 {
    font-weight: bold; /* 一级标题加粗 */
    font-size: 1.2em; /* 一级标题字体稍大 */
}

.toc-level-2 {
    margin-left: 20px; /* 二级标题缩进 */
    font-size: 1.1em; /* 二级标题字体稍大 */
}

.toc-level-3 {
    margin-left: 40px; /* 三级标题缩进 */
    font-size: 1em; /* 三级标题字体正常 */
    color: #333; /* 确保文字颜色足够对比度 */
}

/* 添加折叠按钮的样式 */
.table-of-contents .toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #007acc; /* 折叠按钮背景色 */
    color: #fff; /* 折叠按钮文字颜色 */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 1em; /* 使按钮和内容有间距 */
    font-size: 18px; /* 字体大小 */
}

/* 折叠按钮中的横线样式 */
.table-of-contents .toggle-button::before {
    content: '+'; /* 折叠状态时显示十字符号 */
    display: block;
    font-size: 25px; /* 十字符号字体大小 */
    color: #fff; /* 十字颜色 */
}

/* 展开状态的样式 */
.table-of-contents:not(.collapsed) .toggle-button::before {
    content: '-'; /* 展开状态时显示减号符号 */
    font-size: 25px; /* 减号符号字体大小 */
}

/* 折叠状态的样式 */
.table-of-contents.collapsed {
    max-height: 25px; /* 折叠时高度限制 */
    overflow: hidden; /* 隐藏超出内容 */
    width: 25px;
}

/* Dark mode specific styles */
.table-of-contents.dark-mode .toggle-button {
    background-color: #555; /* 暗模式下按钮的背景颜色 */
    color: #fff; /* 暗模式下按钮文字的颜色 */
}

/* Dark mode toggle button content */
.table-of-contents.dark-mode .toggle-button::before {
    color: #fff; /* 暗模式下的十字或减号颜色 */
}

/* Dark mode with collapsed state */
.table-of-contents.dark-mode.collapsed {
    background-color: #333; /* 确保折叠时背景颜色一致 */
    border-color: #555; /* 折叠状态下的边框颜色 */
}


/* 修改默认的链接颜色 */
a {
    color: #007acc; /* 默认链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}

/* 悬停时的颜色 */
a:hover {
    color: #0056a0; /* 悬停时的颜色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 访问过的链接颜色 */
a:visited {
    color: #aa6be3; /* 访问过的链接颜色 */
}

/* 活动链接的颜色 */
a:active {
    color: #ff6600; /* 点击时的颜色 */
}


/* 小屏幕样式 */
@media (max-width: 768px) {
    .table-of-contents {
        top: 50px;
        right: 0;
        width: 80%;
        max-width: 100%;
        border-radius: 0;
        max-height: none;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .table-of-contents.collapsed {
        height: auto;
        width: 5%;
    }

    .table-of-contents .toggle-button {
        font-size: 18px;
        padding: 10px;
    }

    .table-of-contents ul {
        padding: 10px;
        max-height: 40vh;
        overflow-y: auto;
    }

    .table-of-contents li {
        margin: 0.3em 0;
    }

    .toc-level-1 {
        font-size: 1em;
    }

    .toc-level-2 {
        margin-left: 10px;
        font-size: 0.9em;
    }

    .toc-level-3 {
        margin-left: 20px;
        font-size: 0.8em;
    }
}